import 'dart:async';
import 'package:al_pay_flutter/pages/common_widget/bottom_clipper.dart';
import 'package:al_pay_flutter/pages/common_widget/my_appbar.dart';
import 'package:flutter/material.dart';
import 'finance/finance_page.dart';
import 'package:battery/battery.dart';
import 'package:al_pay_flutter/pages/untils/screen.dart';

class AllmymoneyPage extends StatefulWidget {
  @override
  _AllmymoneyPageState createState() => _AllmymoneyPageState();
}

class _AllmymoneyPageState extends State<AllmymoneyPage> {
  bool open = false;
  final Battery _battery = Battery();
  Timer time;
  BatteryState _batteryState;
  StreamSubscription<BatteryState> _batteryStateSubscription;
  num allMyMoney = 14051033.34;
  @override
  void initState() {
    super.initState();
    _batteryStateSubscription =
        _battery.onBatteryStateChanged.listen((BatteryState state) {
      if (state?.index == 1) {
        setState(() {
          _batteryState = state;
          time = Timer.periodic(Duration(milliseconds: 100), (t) {
            setState(() {
              allMyMoney = allMyMoney + 1;
            });
          });
        });
      } else {
        time?.cancel();
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    time?.cancel();
    if (_batteryStateSubscription != null) {
      _batteryStateSubscription.cancel();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: myAppBar(context),
        body: ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: Stack(
            children: <Widget>[
              Container(
                child: ClipPath(
                  //路径裁切组件
                  clipper: BottomClipper(), //路径
                  child: Container(
                    color: Theme.of(context).primaryColor,
                    height: 200.0,
                  ),
                ),
              ),
              myBody(context)
            ],
          ),
        ));
  }

  myBody(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Image.asset('assets/images/mayi.jpg'),
          title: Text(
            '有什么可以帮到你？',
            style: TextStyle(color: Colors.white),
          ),
          subtitle: Text(
            '你好，我是智能理财助理支小宝',
            style: TextStyle(color: Colors.white38),
          ),
        ),
        getMycard(
            child: Column(
              children: <Widget>[
                ListTile(
                    title: Text(
                      '我的资产',
                      style: TextStyle(fontWeight: FontWeight.w500),
                    ),
                    subtitle: Text('账户保障免费升级 ',
                        style: TextStyle(color: Colors.green[400])),
                    trailing: Container(
                      width: 142,
                      alignment: Alignment.centerRight,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Icon(
                            IconData(0xe65d, fontFamily: 'iconFont'),
                            color: Theme.of(context).primaryColor,
                          ),
                          Text(
                            '我的三笔钱 ',
                            style: TextStyle(fontWeight: FontWeight.w500),
                          ),
                          Icon(
                            IconData(0xe62d, fontFamily: 'iconFont'),
                            color: Colors.black26,
                            size: 14,
                          ),
                        ],
                      ),
                    )),
                Divider(
                  height: 0.5,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      alignment: Alignment.bottomLeft,
                      child: Row(
                        children: <Widget>[
                          Text(
                            '总资产(元)',
                            style: TextStyle(
                                color: Colors.black38,
                                fontWeight: FontWeight.w500,
                                fontSize: 14),
                          ),
                          Container(
                            height: 38,
                            alignment: Alignment.topCenter,
                            child: IconButton(
                              alignment: Alignment.bottomCenter,
                              onPressed: () {
                                setState(() {
                                  open = !open;
                                });
                              },
                              icon: Icon(
                                IconData(open ? 0xe61c : 0xe6cf,
                                    fontFamily: 'iconFont'),
                                color: Colors.black38,
                                size: 18,
                              ),
                            ),
                          )
                        ],
                      ),
                      height: 46,
                      padding: EdgeInsets.only(left: 16),
                    ),
                    Container(
                      alignment: Alignment.bottomRight,
                      child: Text(
                        '昨日收益',
                        style: TextStyle(
                            fontWeight: FontWeight.w500,
                            color: Colors.black38,
                            fontSize: 14),
                      ),
                      height: 46,
                      padding: EdgeInsets.only(right: 16, bottom: 8),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      alignment: Alignment.topLeft,
                      child: Text(open ? allMyMoney.formate : '*****',
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 18,
                              color: Color.fromRGBO(0, 0, 0, 0.7))),
                      height: 40,
                      padding: EdgeInsets.only(left: 16),
                    ),
                    Container(
                      alignment: Alignment.topRight,
                      child: Text(
                        open ? '+2230.12' : '***',
                        style: TextStyle(
                            fontWeight: FontWeight.w500,
                            fontSize: 18,
                            color: open ? Colors.red[400] : Colors.black87),
                      ),
                      height: 40,
                      padding: EdgeInsets.only(right: 16),
                    ),
                  ],
                ),
                Divider(
                  height: 0.5,
                ),
                Expanded(
                    child: litilBox([
                  {
                    'title': '余额',
                    'subtitle': '230,042.10',
                    'tailing': '0.00',
                    'action': ''
                  },
                  {
                    'title': '余额宝',
                    'subtitle': '230,147.2',
                    'tailing': '0.00',
                    'action': ''
                  },
                  {
                    'title': '理财产品',
                    'subtitle': '230,342.10',
                    'tailing': '21.80',
                    'action': ''
                  },
                  {
                    'title': '基金',
                    'subtitle': '230,851.5',
                    'tailing': '0.00',
                    'action': '赎回中',
                    // 'actionFunc': (context) {},
                    'tapFunction': (BuildContext contex) {
                      Navigator.push(context, MaterialPageRoute(builder: (_) {
                        return FinancePage();
                      }));
                    }
                  },
                  {
                    'title': '黄金',
                    'subtitle': '230,342.10',
                    'tailing': '0.00',
                    'action': ''
                  },
                  {'title': '', 'subtitle': '', 'tailing': '', 'action': ''},
                ], context)),
                Container(
                  child: Text(
                    '去看看更多理财产品 ',
                    style: TextStyle(
                      color: Colors.black38,
                    ),
                  ),
                  height: 32,
                )
              ],
            ),
            height: 378),
        getMycard(
            height: 114,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('我的保障'),
                ),
                Divider(
                  height: 0.5,
                ),
                Expanded(
                    child: litilBox([
                  {
                    'title': '相互宝',
                    'subtitle': '1位家人保障中',
                    'tailing': '',
                    'action': ''
                  },
                  {
                    'title': '保险',
                    'subtitle': '一位家人保障中',
                    'tailing': '',
                    'action': ''
                  },
                ], context)),
              ],
            )),
        getMycard(
            height: 173,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('我的额度'),
                ),
                Divider(
                  height: 0.5,
                ),
                Expanded(
                    child: litilBox([
                  {
                    'title': '花呗',
                    'subtitle': '可用额度230,000.00',
                    'tailing': '',
                    'action': ''
                  },
                  {
                    'title': '借呗',
                    'subtitle': '可借32,0500.00',
                    'tailing': '',
                    'action': ''
                  },
                  {
                    'title': '网商贷',
                    'subtitle': '可用额度500',
                    'tailing': '',
                    'action': ''
                  },
                  {
                    'title': '备用金',
                    'subtitle': '去使用',
                    'tailing': '',
                    'action': ''
                  },
                ], context)),
              ],
            )),
        getMycard(
            height: 114,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text('我的档案'),
                ),
                Divider(
                  height: 0.5,
                ),
                Expanded(
                    child: litilBox([
                  {
                    'title': '风险类型',
                    'subtitle': '积极型',
                    'tailing': '',
                    'action': ''
                  },
                  {
                    'title': '理财性格',
                    'subtitle': '独立自信型',
                    'tailing': '',
                    'action': ''
                  },
                ], context)),
              ],
            )),
        Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '————  没有更多啦  ————',
                style: TextStyle(color: Colors.black12, height: 4),
              )
            ],
          ),
        ),
        Text(
          _batteryState?.index.toString() + '1 为充电，2为不充电',
          style: TextStyle(color: Color.fromRGBO(0, 0, 0, 0.1)),
        ),
      ],
    );
  }

  Widget getMycard({Widget child, double height = 88.0}) {
    return Container(
      child: child,
      height: height,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(4)),
      margin: const EdgeInsets.only(top: 8, left: 16, right: 16),
      // padding: const EdgeInsets.only(left: 16, right: 16),
    );
  }

  Widget getMyListTitle({Widget child, double height = 88.0}) {
    return Container(
      child: child,
      height: height,
      alignment: Alignment.center,
      decoration: BoxDecoration(
          color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(4)),
      margin: const EdgeInsets.only(top: 8, left: 16, right: 16),
      // padding: const EdgeInsets.only(left: 16, right: 16),
    );
  }

  Widget litilBox(List list, BuildContext context) {
    return GridView.count(
      //不滚动
      physics: NeverScrollableScrollPhysics(),
      //水平子Widget之间间距
      // crossAxisSpacing: 10.0,
      //垂直子Widget之间间距
      // mainAxisSpacing: 30.0,
      //GridView内边距
      padding: EdgeInsets.all(0.0),
      //一行的Widget数量
      crossAxisCount: 2,
      //子Widget宽高比例
      childAspectRatio: 2.8,
      //子Widget列表
      children: getWidgetList(list: list, context: context),
      // children: [Text('dddd'),Text('dddd'),],
    );
  }

  List<Widget> getWidgetList({List list, BuildContext context}) {
    int i = 0;
    return list.map((item) {
      i++;
      return GestureDetector(
        onTap: () {
          item['tapFunction'](context);
        },
        child: Container(
          decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(
                      width: 0.5, color: Color.fromRGBO(0, 0, 0, 0.05)),
                  right: BorderSide(
                      width: i % 2 / 2.toDouble(),
                      color: Color.fromRGBO(0, 0, 0, 0.05)))),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    alignment: Alignment.center,
                    child: Text(item['title'],
                        style: TextStyle(fontSize: 14, color: Colors.black38)),
                    height: 32,
                    padding: EdgeInsets.only(left: 16),
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Text(
                      item['action'],
                      style: TextStyle(
                          fontSize: 12,
                          color: open
                              ? Colors.red[400]
                              : Color.fromRGBO(0, 0, 0, 0.6)),
                    ),
                    // height: 40,
                    padding: EdgeInsets.only(right: 16),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    alignment: Alignment.topLeft,
                    child: Text(open ? item['subtitle'] : '*****',
                        style: TextStyle(
                            fontSize: 14, color: Color.fromRGBO(0, 0, 0, 0.6))),
                    // height: 40,
                    padding: EdgeInsets.only(left: 16),
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: Text(
                      open ? item['tailing'] : '***',
                      style: TextStyle(
                          fontSize: 14,
                          color: open
                              ? Colors.red[400]
                              : Color.fromRGBO(0, 0, 0, 0.8)),
                    ),
                    // height: 40,
                    padding: EdgeInsets.only(right: 16),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    }).toList();
  }
}
